<template>
  <div style="position: relative">
    <!-- 如果没有评论 -->
    <div v-if="tableData.length == 0" style="display: flex; flex-direction: column; align-items: center">
      <img src="@/assets/空状态.png" style="height: 400px; width: 400px" />
      <h2>暂无评论内容</h2>
    </div>

    <!-- 显示评论 -->
    <div v-for="(item, index) in tableData" :key="item.id" style="border-bottom: 1px solid var(--change-backgroud-color); padding: 10px">
      <!-- 单条评论 -->
      <div style="display: flex; justify-content: space-between;">
        <CommentPlay :item="item" @brush="brush"></CommentPlay>
        <!-- 根据用户身份显示删除按钮 -->
        <el-button
            v-if="canDelete(item)"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="deleteComment(item.id, index)"
            class="custom-delete-button"
        >
          删除
        </el-button>
      </div>

      <!-- 子评论 -->
      <div style="margin-left: 40px; margin-top: 10px">
        <div v-for="(child, childIndex) in item.children" :key="child.id" style="border-bottom: none;">
          <CommentPlay :item="child" @brush="brush"></CommentPlay>
          <!-- 子评论的删除按钮 -->
          <el-button
              v-if="canDelete(child)"
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="deleteComment(child.id, index, childIndex)"
              class="custom-delete-button"
          >
            删除
          </el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import CommentPlay from "@/components/CommentPlay.vue";

export default {
  data() {
    return {
      selectCommentRow: {},
      commentVisible: false,
      pageRequest: {
        pageNum: 1,
        pageSize: 10000,
        q: {}
      },
      tableData: [],
      pageSizeArr: [10000],
      total: 0,
      user: JSON.parse(localStorage.getItem("user")),
      userRole: 'ROLE_USER'  // 用户角色
    };
  },
  components: { CommentPlay },
  props: {
    postCodeId: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    this.userRole = this.user.role;
    // this.userRole = 'ROLE_USER';
    this.load();
  },
  methods: {
    // 判断用户是否有权限删除评论
    canDelete(comment) {
      if (this.userRole === 'ROLE_ADMIN') {
        return true;
      }
      if (this.userRole === 'ROLE_USER' || this.userRole === 'ROLE_TEACHER') {
        return comment.commentUserId === this.user.userId;
      }
      return false;
    },

    // 刷新评论列表
    brush() {
      this.load();
    },

    // 加载评论列表
    load() {
      this.pageRequest.q.postCodeId = this.postCodeId;
      this.request.post("/comment", this.pageRequest).then(res => {
        if (res.code === '200') {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },

    // 分页大小变化
    handleSizeChange(size) {
      this.pageRequest.pageSize = size;
      this.load();
    },

    // 页码变化
    handleCurrentChange(pageNum) {
      this.pageRequest.pageNum = pageNum;
      this.load();
    },

    // 删除评论
    deleteComment(commentId, parentIndex, childrenIndex = null) {
      this.$confirm('确定要删除该评论吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.delete(`/comment/${commentId}`).then(res => {
          if (res.code === '200') {
            if (childrenIndex !== null) {
              this.tableData[parentIndex].children.splice(childrenIndex, 1);
            } else {
              this.tableData.splice(parentIndex, 1);
            }
            this.$message.success('评论已删除');
          } else {
            this.$message.error('删除失败');
          }
        }).catch(() => {
          this.$message.error('删除失败');
        });
      });
    },
  }
};
</script>

<style scoped>
.custom-delete-button {
  background-color: transparent; /* 透明背景 */
  color: #757575; /* 深灰色文字 */
  font-size: 12px; /* 字体大小 */
  padding: 2px 6px; /* 减小内边距 */
  border-radius: 4px; /* 圆角 */
  transition: transform 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* 动画效果 */
  cursor: pointer; /* 鼠标样式 */
  &:hover {
    transform: scale(1.1); /* 悬停时放大 */
    color: #cf2828; /* 悬停时颜色变为深蓝色 */
  }
}
</style>